<template>
	<view class="comp-choose-color" :style="{
      marginLeft: offsetLeft + 'px',
    }">
		<scroll-view class="background-list" scroll-x="true" scroll-left="0" :enable-flex="true">
			<!-- <view
        class="scroll-view-item_H"
        :class="{ active: current === '' }"
        @tap="onTabItem('')"
      >
        <image class="no-choose-icon" src="/static/other/no-choose.png"></image>
      </view> -->
			<view :class="['scroll-view-item_H', { active: current === item.background }]" v-for="item in backColorList"
				:key="item.background" @tap="onTabItem(item)">
				<view class="background-item" :style="{ background: item.background }"></view>
			</view>
			<view class="scroll-view-item_H" @tap="onCustomColor">
				<view class="custom-color-icon"></view>
				<!-- <image class="custom-color-icon" src="/static/other/custom-color.svg"></image> -->
			</view>
			<view class="arrow-box-placement"></view>
		</scroll-view>
		<view class="arrow-box">
			<image class="arrow-right" src="/static/other/arrow-right.svg"></image>
		</view>
		<t-color-picker ref="colorPicker"  @confirm="onConfirmColor"></t-color-picker>
	</view>
</template>
<script setup>
	import TColorPicker from "@/components/t-color-picker/t-color-picker.vue";
	import {
		backColorList as fixedBackColorList
	} from '@/common/js/data.js';
	import {
		ref,
		reactive,
		defineProps,
		computed,
		defineExpose,
	} from "vue";
	const props = defineProps({
		offsetLeft: {
			type: Number,
			default: 18,
		},
		current: {
			type: String,
			default: '#FFFFFF',
		},
		onColorChange: {
			type: Function,
			default: () => {
				
			},
		},
	});
	const emit = defineEmits(['colorChange', 'backColorListChange'])
	const customColors = reactive([]);
	const colorPicker = ref(null);
	
	const backColorList = computed(() => {
		let list;
		if (!customColors.length) {
			list = fixedBackColorList;
		} else {
			const customColorOptions = customColors.map((item, index) => ({
				id: fixedBackColorList.length + index,
				background: item,
			}));
			list = [
				...fixedBackColorList,
				...customColorOptions,
			]
		}
		emit('backColorListChange', list);
		return list;
	});
	const onTabItem = (item) => {
		console.log('onTabItem', item)
		if(item.background !== props.current) {
			props.onColorChange(item.background)
		}
	};
	const onCustomColor = () => {
		//打开颜色选择器
		colorPicker.value.open();
	};
	const onConfirmColor = (data) => {
		console.log('color', data);
		const colorStr = data.hex;
		// 已存在该色值
		if(backColorList.value.find(item => item.background.toUpperCase() === colorStr)){
			uni.$u.toast('已存在该色值');
			return;
		}
		// 最多三个自定义颜色，后续会覆盖第一个
		if(customColors.length < 3) {
			customColors.push(colorStr)
		} else {
			customColors[0] = colorStr;
		}
		onTabItem({
			background: colorStr,
		});
	};
	
	const changeCustomSize = (size) => {
		customObj.value = size.mm;
		customObj.px = size.px;
		customObj.unit = size.unit;
	};
	
</script>

<style lang="less" scoped>
	.comp-choose-color {
		position: relative;

		.arrow-box {
			height: 100%;
			background-color: #fff;
			position: absolute;
			right: 0;
			top: 0;
			display: flex;
			align-items: center;

			.arrow-right {
				width: 48rpx;
				height: 76rpx;
			}
		}

		.arrow-box-placement {
			width: 48rpx;
			display: inline-flex;
		}

		.background-list {
			white-space: nowrap;
			width: 100%;

			.background-item {
				box-sizing: border-box;
				height: 36px;
				width: 36px;
				border-radius: 100%;
				border: 1px solid rgba(229, 229, 229, 1);
			}
		}

		.scroll-view-item_H {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			height: 44px;
			width: 44px;
			margin-right: 4px;
			background-color: #fff;
			border-radius: 100px;

			&.active {
				border: 4px solid rgba(229, 229, 229, 1);
			}
		}

		.no-choose-icon {
			height: 36px;
			width: 36px;
		}
		.custom-color-icon {
			height: 36px;
			width: 36px;
			background-image: url(/static/other/custom-color.svg);
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	}
</style>